<template>
  <el-container id="container">
    <el-aside width="200px">
      <el-menu
          router
          style="height: 100%; width:100%"
          background-color="#001529"
          text-color="#96a1ab"
          :default-active="'/back/frontPage'"
          active-text-color="#409DFE"
          :collapse="isCollapse"
          :collapse-transition="false"
          @open="handleOpen"
          @close="handleClose"
          @select="handleRoute"
      >
        <!--@select是菜单激活回调，激活后就可以跳转路由页面了-->
        <div style="height: 100px; display: flex;justify-content: center">
          <el-link href="/back/frontPage">
            <el-image :src="imgPrefix+'/ciecleLogo.png'"/>
          </el-link>
        </div>
        <el-menu-item index="/back/frontPage">
          <el-icon>
            <setting/>
          </el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-menu-item index="/back/user">
          <el-icon>
            <document/>
          </el-icon>
          <span>用户管理</span>
        </el-menu-item>
        <el-menu-item index="/back/movie">
          <el-icon>
            <setting/>
          </el-icon>
          <span>电影管理</span>
        </el-menu-item>
        <el-menu-item index="/back/cinema">
          <el-icon>
            <setting/>
          </el-icon>
          <span>电影院管理</span>
        </el-menu-item>
        <el-menu-item index="/back/hall">
          <el-icon>
            <setting/>
          </el-icon>
          <span>放映厅管理</span>
        </el-menu-item>
        <el-menu-item index="/back/actor">
          <el-icon>
            <setting/>
          </el-icon>
          <span>演员管理</span>
        </el-menu-item>
        <el-menu-item index="/back/movieType">
          <el-icon>
            <setting/>
          </el-icon>
          <span>电影类型管理</span>
        </el-menu-item>
        <el-menu-item index="/back/movieComment">
          <el-icon>
            <setting/>
          </el-icon>
          <span>评论管理</span>
        </el-menu-item>
        <el-menu-item index="/back/screeningOrganize">
          <el-icon>
            <setting/>
          </el-icon>
          <span>场次管理</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>
<script setup>
import {ElNotification, ElMessageBox} from "element-plus";
import request from "@/request.js";
import {request2} from "@/request.js";
import qs from 'qs'
import {ref, reactive, onMounted, onBeforeUnmount, inject} from "vue";
import {
  Lock,
  User,
  Cellphone,
  UserFilled,
  Search,
  Document,
  Menu as IconMenu,
  Location,
  Setting
} from "@element-plus/icons-vue";
import SessionStorage from "@/SessionStorage.js";
import {useRoute, useRouter} from "vue-router";
import axios from "axios";
import moment from "moment";

const imgPrefix = inject('imgPrefix');
const loginUser = SessionStorage.getItem("loginUser");


const isCollapse = ref(false);


const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleRoute = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>
<style scoped>

#container {
  height: 100%;
}

.el-header {
  height: 8%;

}

.el-main {
  height: 100%;
}

.el-aside {
}
</style>
